const musicContainer = document.getElementById('music - container');
const playBtn = document.getElementById('play');
const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById('next');
const audio = document.getElementById('audio');
const progress = document.getElementById('progress');
const progressContainer = document.getElementById('progress - container');
const title = document.getElementById('title');
const cover = document.getElementById('cover');
//f放歌名
const songs = ['hey','summer', 'ukulele'];
//找歌曲
let songIndex = 2;
// 初次加载歌曲到 DOM
loadSong(songs[songIndex]);

// 更新歌曲信息
function loadSong(song) {
    title.innerText = song;
    audio.src = '谭咏麟-爱在深秋.mp3';
    cover.src = '11.jpg'; 
}

// 播放歌曲
function playSong() {
    musicContainer.classList.add('play');
    playBtn.querySelector('i.fas').classList.remove('fa-play');
    playBtn.querySelector('i.fas').classList.add('fa-pause');
    audio.play();
}
// 暂停歌曲
function pauseSong() {
    musicContainer.classList.remove('play');
    playBtn.querySelector('i.fas').classList.add('fa-play');
    playBtn.querySelector('i.fas').classList.remove('fa-pause');
    audio.pause();
}

// 上一首歌曲
function prevSong() {
    songIndex--;
    if (songIndex < 0) {
        songIndex = songs.length - 1;
    }
    loadSong(songs[songIndex]);
    playSong();
}
// 下一首歌曲
function nextSong() {
    songIndex++;
    if (songIndex > songs.length - 1) {
        songIndex = 0;
    }
    loadSong(songs[songIndex]);
    playSong();

}

// 更新进度条
function updateProgress(e) {
    const { duration, currentTime } = e.srcElement;
    const progressPercent = (currentTime / duration) * 100;
    progress.style.width = `${progressPercent}%`;
}

// 设置进度条
function setProgress(e) {

    const width = this.clientWidth;
    const clickX = e.offsetX;
    const duration = audio.duration
    
    audio.currentTime = (clickX / width) * duration
}

// 事件监听器
playBtn.addEventListener('click', function(){
    const isPlaying = musicContainer.classList.contains('play');
   if (isPlaying) {
    pauseSong();
   } else{
    playSong();
   }
});
// 切歌
prevBtn.addEventListener('click',prevSong);
nextBtn.addEventListener('click',nextSong);

// 时间/歌曲 update
audio.addEventListener('timeupdate', updateProgress);

// 在进度条上点击
progressContainer.addEventListener('click', setProgress);

// 歌曲结束
audio.addEventListener('ended', nextSong);